<template>

</template>

<script setup lang="ts">
import 'er-canvas/dist/index.css';
import ErCanvas from 'er-canvas';


let er = new ErCanvas(document.querySelector('#app'), {
  width: 1600,
  height: 1200,
  onContextmenu(e, target) {
    console.log(target);
  },
  onSelectLine(line) {
    console.log(line)
  },
  onSelectTable(table) {
    console.log(table)
  },
  tables: [{
    id: 'frb',
    name: '用户表',
    fields: Array(20).fill(1).map((t, i) => {
      return {
        id: 'frbfield' + i,
        name: '字段' + i,
      };
    }),
    top: 0,
    left: 0,
    width: 100,
    height: 100,
  }, {
    id: 'cyb',
    name: '信息表',
    fields: [
      {
        id: 'cybfield1',
        name: '字段1',
      },
      {
        id: 'cybfield2',
        name: '字段2',
      },
    ],
    top: 0,
    left: 300,
    width: 100,
    height: 100,
  }],
  lines: [{
    form: 'frbfield1',
    to: 'cybfield1',
  }],
})
</script>

<style scoped>

</style>